<template>
<div class="studentFinishDetail">
  <div class="studentDetail-header">
    <el-breadcrumb separator="/" class="studentDetail-headerbottom">
      <el-breadcrumb-item :to="{ path: '/mentor/mentorSituation/mSituationFinish' }">任务列表</el-breadcrumb-item>
      <el-breadcrumb-item>填报详情</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

    <!-- 版心 -->
  <div class="studentFinishDetail-main">
    <div class="studentDetail-main-top">
      学业情况详情
    </div>

    <!-- 基本信息 -->
     <div class="studentDetail-main-subject">
      <div class="studentDetailTitle">基本信息</div>
      <div class="studentDetail-subjectmain">
        <div class="set-wb"><span class="sfd-set-span">学生姓名</span>
          {{ userName }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">学号</span>
          {{ questionnaireId }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">专业</span>
          {{ major }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">班级</span>
          {{ classname }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">任务名称</span>
          {{ questionnaireName }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">任务状态</span>
          {{ state }}
        </div>
      </div>
     </div>

    <!-- 基本学业 -->
     <div class="studentDetail-main-subject">
      <div class="studentDetailTitle">基本学业</div>
      <div class="studentDetail-subjectmain">
        <div class="set-wb"><span class="sfd-set-span">考试</span>
          {{ studentDetailStore.studentDetailData.examLevel }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">分数</span>
          {{ studentDetailStore.studentDetailData.examscore }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">奖学金情况</span>
          {{ studentDetailStore.studentDetailData.scholarship }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">政治面貌</span>
          {{ studentDetailStore.studentDetailData.politicalAppearance }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">加权绩点</span>
          {{ studentDetailStore.studentDetailData.grades }}
        </div>
        <div class="set-wb"><span class="sfd-set-span">志愿时长</span>
          {{ studentDetailStore.studentDetailData.volunteerDuration }}
        </div>
      </div>
     </div>

     <!-- 比赛 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">比赛</div>
        <div class="set-wmain"><span class="sfd-set-span">获奖情况</span>
          {{ studentDetailStore.studentDetailData.competitionDescription }}
        </div>
        <div class="set-wmain" v-if="studentDetailStore.studentDetailData.competitionPath"><span class="sfd-set-span">获奖证书</span>
            <el-image
              style="width: 100px; height: 100px"
              :src="studentDetailStore.studentDetailData.competitionPath"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
       </div>

     <!-- 论文 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">论文</div>
        <div class="set-wmain"><span class="sfd-set-span">论文情况</span>
          {{ studentDetailStore.studentDetailData.paperDescription }}
        </div>
        <div class="set-wmain" v-if="studentDetailStore.studentDetailData.paperPath.length"><span class="sfd-set-span">证明资料</span>
            <el-image
              style="width: 100px; height: 100px"
              :src="studentDetailStore.studentDetailData.paperPath"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
       </div>

     <!-- 科研成果 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">科研成果</div>
        <div class="set-wmain"><span class="sfd-set-span" style="width: 160px;">授权的发明专利情况</span>
          {{ studentDetailStore.studentDetailData.scientificResearchDescription }}
        </div>
        <div class="set-wmain"><span class="sfd-set-span" style="width: 160px;">软件著作权情况</span>
          {{ studentDetailStore.studentDetailData.Copyright }}
        </div>
        <div class="set-wmain" v-if="studentDetailStore.studentDetailData.scientificResearchPath.length"><span class="sfd-set-span">纸质证明</span>
            <el-image
              style="width: 100px; height: 100px"
              :src="studentDetailStore.studentDetailData.scientificResearchPath"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="srcList"
              show-progress
              :initial-index="4"
              fit="cover"
            />
        </div>
      </div>

     <!-- 违纪 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">违纪</div>
        <div class="set-wmain"><span class="sfd-set-span">违纪情况</span>
          {{ studentDetailStore.studentDetailData.disciplinaryText }}
        </div>
      </div>
      
     <!-- 毕业去向 -->
      <div class="studentDetail-main-subject">
        <div class="studentDetailTitle">毕业去向</div>
        <div class="set-wmain"><span class="sfd-set-span">毕业去向</span>
          {{ studentDetailStore.studentDetailData.graduationText }}
        </div>
      </div>

      <!-- 底部按钮 -->
       <div class="msd-buttom" v-if="isBottom">
        <el-button v-if="!isChangeBottom" @click="submitSuccess()" class="buttom-index" style="background-color: #e43535;">审核成功</el-button>
        <el-button v-if="!isChangeBottom" class="buttom-index" style="background-color: #629df5;"
        @click="submitFall()"
        >审核失败</el-button>
        <el-button v-if="isChangeBottom" class="buttom-index" style="background-color: #979797;width: 420px;">{{ changeBottomIndex }}</el-button>

       </div>

  </div>
</div>
</template>

<script setup>
import {ref,watch,onBeforeMount} from 'vue'
import { useRoute } from 'vue-router'
import { useMentorSituationStore } from '@/stores/mentor/mSituation'
import { useStudentDetailStore } from '@/stores/student/studentDetail'
import { ElMessage } from 'element-plus'

const studentDetailStore = useStudentDetailStore()
const mentorSituationStore = useMentorSituationStore()

const route = useRoute() 
let isBottom = ref(true)
let isChangeBottom = ref(false)
let changeBottomIndex = ref('审核成功，已提交')
// 监听路由变化
watch(() => route.query, (newQuery) => {
  if (newQuery.hideBottom) {
    isBottom.value = false  // 如果查询参数包含hideBottom，隐藏底部
  } else {
    isBottom.value = true   // 否则显示底部
  }
}, { immediate: true })  // 立即执行一次

let questionnaireId = ref()
const userName = route.query.userName
const grade = route.query.grade
const major = route.query.major
const classname = route.query.classname
const questionnaireName = route.questionnaireName || '学生学业情况'
const state = route.query.state

onBeforeMount(() => {
  questionnaireId = route.query.id
  console.log(questionnaireId)

  studentDetailStore.studentDetailRequest(questionnaireId.value)
})

const submitSuccess = async() => {
  await mentorSituationStore.mSPDetailPassRequest(questionnaireId.value)
  isChangeBottom.value = true
  ElMessage.success('保存成功')
  console.log(isChangeBottom.value)
}
const submitFall = async() => {
  await mentorSituationStore.mSPDetailFallRequest(questionnaireId.value)
  changeBottomIndex.value ='审核失败，已退回'
  isChangeBottom.value = true
  ElMessage.success('保存成功')
}

// // 测试图片
// const url =
//   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
// const srcList = [
//   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
//   'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
//   'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
//   'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
//   'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
//   'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
//   'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
// ]
</script>

<style scoped lang="scss">
.studentFinishDetail {
  width: 100%;
  height: 100%;
  position: relative;
  .studentDetail-header {
    width: 100%;
    height: 16vh;
    position: sticky;
    top: 0px;
    z-index: 100;
    .studentDetail-headerbottom {
      width: 100%;
      height: 8vh;
      background-color: #fff;
      border-top: 1px solid #bcbcbc;
      border-bottom: 1px solid #bcbcbc;
      line-height: 8vh;
      padding: 0 40px;
      font-size: 18px;
      :deep(.el-breadcrumb__inner) {
        font-weight: normal;
        color: #7f7f7f;
      }
    }
  }

  .studentFinishDetail-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;

    .studentDetail-main-top{
      width: 80%;
      font-weight: 500;
      font-size: 24px;
      text-align: left;
      border-bottom: 1px solid #e0e1e5;
    }

    .studentDetail-main-subject {
      display: flex;
      flex-direction: column;
      width: 80%;
      background-color: #fff;
      padding: 20px;
      margin: 20px 0;
      .studentDetail-subjectmain {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
    }
  
  }
}
.studentDetailTitle {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 5px solid #165dff;
}
.set-wb {
  width: 30%;
  color: #393d44;
  margin: 5px;
}
.set-wmain {
  width: 100%;
  color: #5d5d60;
  font-size: 14px;
  margin: 10px;
}
.sfd-set-span {
  display: inline-block;
  width: 100px;
  color: #4e5969;
  text-align: right;
  margin-right: 15px;
  vertical-align: top;
}
/* 测试图片格式 */
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.msd-buttom {
  width: 80%;
  .buttom-index {
    width: 200px;
    height: 40px;
    border-radius: 16px;
    color: #fff;
    font-size: 16px;
    margin-right: 20px;
    margin-top: 10px;
  }
}
</style>